@using Smartstore.Core.Widgets

@{
    // TODO: (mw) (dt) Bug: Scrolljump when closing the offcanvas menu after auto scroll.
    //                      Possible solution: Save scrollX/Y before scrolling, then scroll back after the animation is done (See JS code).

    if (ViewData["widgetzone"] is not IWidgetZone zone)
    {
        return;
    }

    // Check if the visibility cookie is set.
    var visibilityCookie = Request.Cookies[".Smart.WZVisibility"];
    var isVisible = visibilityCookie != "false";
    var zonePreviewClass = isVisible ? "" : " d-none";
    var wzToolClass = isVisible ? " show-wz" : "";

    if (zone.Name == "start")
    {
    // Add the offcanvas zone preview menu
        <a id="wz-menu-toggle" class="d-none d-lg-block btn btn-dark dispensable" href="#" data-toggle="offcanvas"
           data-autohide="false" data-blocker="false" data-placement="end" data-fullscreen="false" data-slide="false" data-target="#wz-menu" title="@T("Plugins.Developer.DevTools.WidgetZoneMenu")">
            <i class="far fa-layer-group"></i>
        </a>
        <aside id="wz-menu" class="d-none d-lg-block bg-dark offcanvas offcanvas-end offcanvas-shadow dispensable">
            <div class="offcanvas-content d-flex flex-column">
                <div class="wz-zone-list custom-scrollbar custom-scrollbar-invert" attr-class='(!isVisible, "d-flex")'>
                    @* INFO: (mw) Please STOP using unprefixed, generic CSS class names for specific modules. Pay more attention to the review commits! *@
                    <div sm-if="!isVisible" class="text-white-50 text-center align-self-center p-3">@Html.Raw(T("Plugins.Developer.DevTools.WidgetZoneMenu.ActivateZones"))</div>
                </div>

                <div id="wz-toolbar">
                    <a class="wz-tool wz-toggle@(wzToolClass)" data-persistent="true"
                       href="#" rel="nofollow" title="" data-toggle="tooltip" data-placement="top" data-original-title="@T("Plugins.Developer.DevTools.WidgetZoneMenu.PersistentToggle")">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-power" viewBox="0 0 16 16">
                            <!--// Power //-->
                            <path d="M7.5 1v7h1V1z" />
                            <path d="M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812" />
                        </svg>
                    </a>
                    <span class="vr bg-white" style="opacity: 0.05"></span>
                    <a class="wz-tool wz-toggle@(wzToolClass)" attr-class='(!isVisible, "disabled")'
                       href="#" rel="nofollow" title="" data-toggle="tooltip" data-placement="top" data-original-title="@Html.Raw(T("Plugins.Developer.DevTools.WidgetZoneMenu.Toggle"))">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="wz-visible bi bi-eye" attr-class='(!isVisible, "d-none")' viewBox="0 0 16 16">
                            <!--// Open eye //-->
                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" />
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="wz-invisible bi bi-eye-slash" attr-class='(isVisible, "d-none")' viewBox="0 0 16 16">
                            <!--// Closed eye //-->
                            <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
                            <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
                            <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
                        </svg>
                    </a>
                    <span class="vr bg-white" style="opacity: 0.05"></span>
                    <a class="wz-tool wz-sidebar-close"
                       href="#" rel="nofollow" title="" data-toggle="tooltip" data-placement="top" data-original-title="@T("Plugins.Developer.DevTools.WidgetZoneMenu.CloseButton")">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
                            <!--// Right arrow //-->
                            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
                        </svg>
                    </a>
                </div>
            </div>
        </aside>
    }
}

<script sm-if='zone.Name == "end"' type="module">
    @{
        var translationKeys = new[]
        {
            "Common.CopyToClipboard"
        };
    }

    import { DevTools } from "@(Url.Content("~/Modules/Smartstore.DevTools/js/smartstore.devtools.js"))";

    // Add widget zone group containers.
    let groups = @Html.Raw(Json.Serialize(ViewBag.WidgetZoneGroups));

    // Add a meta and default group for user-defined zones.
    groups.unshift({
        name: 'Meta',
        zones: [],
    });
    groups.push({
        name: @T("Admin.WidgetZones.UserDefined").JsValue,
        zones: []
    });

    $(function () {
        const zoneList = document.querySelector('.wz-zone-list');

        // Add div's to '#wz-menu .wz-zone-list' for each element in groups.
        groups.forEach(group => {
            let groupContainer = $(`<div class="wz-zone-group d-none" data-group="${group.name}"><h6 class="text-white">${group.name}</h6></div>`);
            groupContainer.data('groups', group.zones.join(' '))
            $(zoneList).append(groupContainer);
        });

        const devTools = new DevTools();
        devTools.initialize(@(isVisible ? "true" : "false"));

        // Add translations
        devTools.Res = {
            @foreach (var key in translationKeys)
            {
                <text>"@(Html.Raw(key))": @(T(key).JsValue), </text>
            }
        };

        const zones = $('.wz-preview');
        zones.each(function() {
            const el = $(this);
            if (el.is('meta')) {
                devTools.registerWidgetZone({
                    name: el.attr('content'),
                    previewTagName: 'meta'
                });
            }
            else {
                devTools.registerWidgetZone({
                    name: el.attr('title'),
                    previewTagName: el[0].tagName.toLowerCase()
                });
            }
        });
    });
</script>